import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import axios from 'axios';
import './App.css'

interface TabList {
  key: number;
  label: string;
  children: Array<{ word }>
}

const App: React.FC = () => {
  // 自定义数据状态
  const [list, setList] = useState([])

  // 用接口获取数据
  const getList = async () => {
    const res = await axios.get('/api/classList');
    console.log(res, 'mock模拟的数据')
    const { data } = res.data;
    setList(data)
  }

  // 调用
  useEffect(() => {
    getList()
  }, [])

  // 点击
  const onChange = (key: string) => {
    console.log(key);
  };
  return (
    <div className='box'>
      <Tabs defaultActiveKey="1" onChange={onChange} >
        {
          list.map((item: TabList, index) => (
            <Tabs.TabPane tab={item.label} key={index}>
              {
                item.children.map((it, ind) => (
                  <p key={ind}>
                    <span>{ind < 3 ? ind + 1 : ''}</span>
                    {it.word}
                  </p>
                ))
              }
            </Tabs.TabPane>
          ))
        }
      </Tabs>
    </div>
  )
}

export default App;